<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-box">
			<input type="text" placeholder="搜索商品" v-model="searchKeyword" @input="onSearchInput" />
			<button @click="onSearch">搜索</button>
		</view>

		<!-- 轮播图 -->
		<swiper class="swiper" indicator-dots autoplay interval="3000" duration="500">
			<swiper-item v-for="(item, index) in luoboList" :key="item.id">
				<image :src="item.link" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 公告，活动列表 -->
		<view class="product-list">
			<view class="product-item hight" @click="goNotice">
				<image src="/images/OIP-C (1).jpg" mode=""></image>
			</view>
			<view class="product-item hight" @click="goActivity">
				<image src="/images/OIP-C (3).jpg" mode=""></image>
			</view>
		</view>
		<!-- 商品分类列表 -->
		<view class="classList">
			<view class="classItem" v-for="(item, index) in classList" :key="item.id" @click="goClassDetail(item)">
				<image :src="item.coverImage" mode=""></image>
				<view class="">
					{{item.name}}
				</view>
			</view>
		</view>


		<!-- 商品列表 -->
		<!-- <view class="product-list">
			<view class="product-item" v-for="(item, index) in showProducts" :key="item.id" @click="goDetail(item.id)">
				<image :src="item.coverImage" mode="aspectFill"></image>
				<view class="product-info">
					<text class="product-name">{{ item.name }}</text>
					<text class="product-price">￥{{ item.price }}</text>
				</view>
			</view>
		</view> -->
		<!-- 商品列表 -->
		<proListVue :ProList="products"></proListVue>
	</view>
</template>

<script setup>
	import proListVue from '../../components/proList.vue';
	import {
		getLunBo
	} from '../../api/lunbo';
	import {
		getProList,
		getClass
	} from '../../api/product.js';
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		onReachBottom
	} from '@dcloudio/uni-app';
	

	// 搜索关键词
	const searchKeyword = ref('');
	// 是否进行了搜索操作
	const hasSearched = ref(false);

	// 进入公告页面
	function goNotice() {
		uni.navigateTo({
			url: "/pages/notice/notice"
		})
	}
	// 进入活动页面
	function goActivity() {
		uni.navigateTo({
			url: "/pages/activity/activity"
		})
	}

	// 进入详情页
	// function goDetail(id) {
	// 	uni.navigateTo({
	// 		url: "/pages/xiangqing/xiangqing?id=" + id
	// 	})
	// }

	// 轮播图图片链接
	const luoboList = ref([]);
	async function getLunboList() {
		let r1 = await getLunBo();
		console.log(r1.data.data);
		// 将获取的数据赋值给 luoboList
		luoboList.value = r1.data.data;
	}

	// 商品数据
	const products = ref([]);
	let per = ref(1);
	let page = ref(20);
	// 获取商品列表
	async function getProData() {
		let r2 = await getProList(per.value, page.value);
		console.log(r2.data.data);
		products.value=r2.data.data
		// products.value = products.value.concat(r2.data.data);
		
	}

	// 过滤后的商品列表
	const filteredProducts = computed(() => {
		if (searchKeyword.value === '') {
			products.value
		}
		return products.value.filter((product) =>
			product.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
		);
	});

	// 商品分类列表
	let classList = ref([])
	async function getClassFn() {
		let r3 = await getClass();
		console.log(r3.data);
		classList.value = r3.data.data
	};
	
	// 点击分类进入商品列表
	 function goClassDetail(obj){
		console.log(obj);
		console.log(obj.id);
		uni.navigateTo({
			url:"/pages/classList/classList?id="+obj.id, 
		})
	};

	// 实际显示的商品列表
	const showProducts = computed(() => {
		if (hasSearched.value) {
			return filteredProducts.value;
		}
		return products.value;
	});

	// 页面挂载完成后调用获取轮播图数据的函数
	onMounted(() => {
		getLunboList();
		getProData();
		getClassFn()
	});

	// 上拉触底刷新
	onReachBottom(() => {
		page.value+=10;
		getProData();
	});

	// 输入搜索关键词时触发的函数
	const onSearchInput = () => {
		// 可以在这里添加实时搜索逻辑
	};

	// 点击搜索按钮触发的函数
	const onSearch = () => {
		hasSearched.value = true;
	};
</script>

<style scoped>
	/* 分类列表 */
	.classList {
		display: flex;
		width: 100%;
		height: 100px;
		border-radius: 50%;
	}

	.classList .classItem {
		flex: 1;
		height: 100px;
		text-align: center;
	}

	.classItem image {
		width: 100%;
		height: 70px;
	}

	.hight {
		height: 150px;
	}

	.container {
		padding: 20px;
	}

	.search-box {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.search-box input {
		flex: 1;
		height: 40px;
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-right: 10px;
	}

	.search-box button {
		height: 40px;
		padding: 0 20px;
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
	}

	.swiper {
		height: 200px;
		margin-bottom: 20px;
	}

	.swiper image {
		width: 100%;
		height: 100%;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.product-item {
		width: 48%;
		border: 1px solid #ccc;
		border-radius: 5px;
		overflow: hidden;
	}

	.product-item image {
		width: 100%;
		height: 150px;
	}

	.product-info {
		padding: 10px;
	}

	.product-name {
		font-size: 16px;
		margin-bottom: 5px;
	}

	.product-price {
		font-size: 14px;
		color: #f00;
	}
</style>